import React from 'react'
import { Row, Col, Card, Table, Tag, Space, message, Button, Modal, Statistic } from 'antd'
import { GlobalOutlined, RiseOutlined, EyeOutlined, LikeOutlined } from '@ant-design/icons'

const BrandPromotion: React.FC = () => {
  const brandData = [
    {
      id: '1',
      name: '幸福村大米',
      type: '农产品',
      views: 12500,
      interactions: 2345,
      status: 'active',
      createTime: '2024-01-15'
    },
    {
      id: '2',
      name: '美丽乡村旅游',
      type: '旅游',
      views: 8900,
      interactions: 1567,
      status: 'active',
      createTime: '2024-02-10'
    }
  ]

  const columns = [
    {
      title: '品牌名称',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type'
    },
    {
      title: '浏览量',
      dataIndex: 'views',
      key: 'views',
      render: (views: number) => (
        <Space>
          <EyeOutlined />
          {views.toLocaleString()}
        </Space>
      )
    },
    {
      title: '互动量',
      dataIndex: 'interactions',
      key: 'interactions',
      render: (interactions: number) => (
        <Space>
          <LikeOutlined />
          {interactions.toLocaleString()}
        </Space>
      )
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <Tag color={status === 'active' ? 'success' : 'default'}>
          {status === 'active' ? '活跃' : '停用'}
        </Tag>
      )
    }
  ]

  // 查看品牌详情
  const handleViewBrand = (brand: typeof brandData[0]) => {
    Modal.info({
      title: brand.name,
      content: (
        <div>
          <p>类型: {brand.type}</p>
          <p>浏览量: {brand.views.toLocaleString()}</p>
          <p>互动量: {brand.interactions.toLocaleString()}</p>
          <p>创建时间: {brand.createTime}</p>
        </div>
      )
    })
  }

  // 编辑品牌
  const handleEditBrand = (brand: typeof brandData[0]) => {
    message.info(`编辑品牌: ${brand.name}`)
    // 实际应用中可以打开编辑模态框
  }

  // 切换品牌状态
  const handleToggleStatus = (brand: typeof brandData[0]) => {
    message.success(`${brand.name}已${brand.status === 'active' ? '停用' : '激活'}`)
    // 实际应用中可以更新品牌状态
  }

  // 添加操作列
  const columnsWithActions = [
    ...columns,
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: any) => (
        <Space size="small">
          <Button type="link" onClick={() => handleViewBrand(record)}>查看</Button>
          <Button type="link" onClick={() => handleEditBrand(record)}>编辑</Button>
          <Button 
            type={record.status === 'active' ? 'link' : 'primary'} 
            danger={record.status === 'active'}
            onClick={() => handleToggleStatus(record)}
          >
            {record.status === 'active' ? '停用' : '激活'}
          </Button>
        </Space>
      )
    }
  ]

  return (
    <div>
      <div className="page-title">
        <GlobalOutlined />
        乡村品牌与文旅推广
      </div>

      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        <Col xs={12} sm={6}>
          <Card>
            <Statistic title="品牌数量" value={8} prefix={<GlobalOutlined />} />
          </Card>
        </Col>
        <Col xs={12} sm={6}>
          <Card>
            <Statistic title="总浏览量" value={56890} prefix={<EyeOutlined />} />
          </Card>
        </Col>
        <Col xs={12} sm={6}>
          <Card>
            <Statistic title="总互动量" value={12345} prefix={<LikeOutlined />} />
          </Card>
        </Col>
        <Col xs={12} sm={6}>
          <Card>
            <Statistic title="增长率" value={12.5} suffix="%" prefix={<RiseOutlined />} />
          </Card>
        </Col>
      </Row>

      <Card title="品牌列表" className="custom-card">
        <Table
          columns={columnsWithActions}
          dataSource={brandData}
          rowKey="id"
          pagination={false}
        />
      </Card>
    </div>
  )
}

export default BrandPromotion